<template>
    <div class="class-student-list ">
        <line-head-form class="head" title="学生列表" type="edit"/>
        <el-form :inline="true" :model="form" class="t-form gray t-class-list">
            <el-form-item>
                <el-input v-model="form.nameOrNo" placeholder="姓名/学生编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" class="search-btn">查询</el-button>
                <el-button type="primary" class="search-btn" v-if="!oId" @click="addStudent">学员绑定/解除</el-button>
            </el-form-item>
        </el-form>
        <el-table class="line-table" :data="studentObj.list" style="width: 100%" header-align="center" empty-text="暂无学生">
            <el-table-column prop="studentNo" label="学生编号" align="center" width="160" fixed></el-table-column>
            <el-table-column prop="name" label="学生姓名" align="center" width="160"></el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
                <template scope="scope">
                    {{scope.row.sex===1?'男':scope.row.sex===2?'女':'--'}}
                </template>
            </el-table-column>
            <el-table-column prop="baseSectionName" label="年级" align="center"></el-table-column>
            <el-table-column label="状态" align="center">
                <template scope="scope">
                    {{scope.row.regStatus===0?'在读':scope.row.regStatus===3?'退费':scope.row.regStatus===4?'超时撤销':scope.row.regStatus===11?'试听':''}}
                </template>
            </el-table-column>
            <el-table-column prop="lessonName" label="创建时间"
            align="center">
            <template scope="scope">
                {{scope.row.createTime | formatDate('YYYY-MM-DD H:mm:ss')}}
            </template>
            </el-table-column>
            <el-table-column  label="操作"
            align="center">
                <template slot-scope="scope">
                    <router-link :to="`/main/system/class/report?studentId=${scope.row.id}&studentNo=${scope.row.studentNo}&name=${scope.row.name}`">
                        <span class="btn-edit">学业诊断</span>
                    </router-link>
                    <router-link :to="`/main/system/class/feedback?studentId=${scope.row.id}&studentNo=${scope.row.studentNo}&name=${scope.row.name}`">
                        <span class="btn-edit">学生反馈</span>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <v-pagination ref="pagin" class="pag" :total="studentObj.total|toNumber" @getListResult="getClassStudents" :currentPage="form.pageIndex"></v-pagination>
    </div>
</template>
<script>
import LineHeadForm from '../../common/LineHeadForm'
import VPagination from "../../common/Pagination"
import io from 'lib/io'
import {mapGetters} from 'vuex'
export default {
    name: 'class-list',
    components: {
        VPagination,
        LineHeadForm
    },
    data() {
        return {
            oId:this.$route.query.oId,
            form: {
                lessonClassId:this.$route.query.id,
                nameOrNo:'',
                pageIndex: 1,
                pageSize: 10
            },
            studentObj:{}
        }
    },
    computed: {
        ...mapGetters(['config'])
    },
    created() {
        this.getClassStudents()
    },
    methods: {
        addStudent(){
            this.$router.push({path:'/main/system/class/add-class-student',query:{id:this.form.lessonClassId}})
        },
        async getClassStudents(opt) {
            let {data}=await io.post6(io.findClaStudentPage,{...this.form,...opt})
            if(data.success){
                this.studentObj=data.data
            }
        },
        search() {
            this.$refs.pagin.changePage(1)
      this.form.pageIndex=1
            this.getClassStudents()
        },
    }

}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/mixin.styl'
.class-student-list
    padding-bottom 50px
    padding-top 20px
.t-form
    table-form()
    margin-top 20px
    margin-bottom 30px
    .el-form-item
        margin-bottom 10px
.line-table
    .icon
        cursor pointer
        font-size 20px
        color #999
        margin-right 11px
        margin-left 11px
        &:hover
            color #01d1bb
    .btn-edit{
        cursor: pointer;
        color: #0084bb;
        padding: 0 5px;
        display: inline-block;
    }
.t-class-list
    padding-bottom 10px
    .el-form-item
        margin-right 30px
    .el-form-item.new-item
         bottom 18px
         margin-right 10px

</style>


